import React from 'react';
import Taro from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import { observer } from "mobx-react";
import { Wallet_Store_Key } from "@/models/wallet";
import { norInject, INorInjectProps } from "@/models";
import i18n from 'i18n-js';
import PageContainer from "@/components/PageContainer";
import {
  GStyleSheet,
  DynamicColors,
} from '@/utils/DarkMode';
import ListItem from '@/components/ListItem';
import gizCoinIcon from '@/assets/images/my_recharg_icon_gizwits_beans.png';

const dstyles = GStyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
    flexDirection: 'column',
    backgroundColor: DynamicColors.screenBackgroundGaryColor,
  },
  listBox: {
    paddingTop: 15,
    paddingBottom: 15,
    backgroundColor: DynamicColors.cardBackgroundColor,
    borderBottomColor: '#eee',
    borderBottomWidth: 0,
  },
  listItem: {
    paddingTop: 15,
    paddingBottom: 15,
    // paddingTop: 0,
    // paddingBottom: 0,
    borderBottomWidth: 0,
  },
  listContent: {
    fontSize: 14,
    color: DynamicColors.normalTextColor,
  },
  listContentTips: {
    fontSize: 14,
    color: DynamicColors.subTitleTextColor,
  },
  titleBox: {
    height: 120,
    textAlign: 'center',
  },
  feeBox: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  moneyTitle: {
    fontSize: 30,
    fontWeight: '300',
    color: DynamicColors.normalTextColor,
  },
  moneyTitleTips: {
    fontSize: 14,
    color: DynamicColors.subTitleTextColor,
    marginTop: 10,
  },
});

const detailList = [
  {
    title: 'CONSUME_TYPE',
    dataIndex: 'tradeType',
  },
  {
    title: 'CONSUME_OBJECT',
    dataIndex: 'consumer',
  },
  {
    title: 'CONSUME_TIME',
    dataIndex: 'ctime',
  },
  {
    title: 'PAY_ACCOUNT',
    dataIndex: 'username',
  },
  {
    title: 'SERIAL_NUM',
    dataIndex: 'tradeNo',
  }
];

interface IProps extends INorInjectProps {

}

@norInject(Wallet_Store_Key)
@observer
export default class ConsumeRecordDetail extends React.Component<IProps> {

  goFeedback = () => {
    Taro.navigateTo({ url: "/pages/feedback/index" });
  }

  render() {
    const styles = dstyles.style;
    const { wallet: { consumeDetail, consumeDetail: { payMoney } } } = this.props;
    return (
      <PageContainer
        style={styles.container}
        title={i18n.t('CONSUME_DETAIL')}
      >
        <View style={styles.listBox}>
          <View style={styles.titleBox}>
            <View style={styles.feeBox}>
              <Image src={gizCoinIcon} style={{ width: 30, height: 30, marginRight: 5 }} />
              <Text style={styles.moneyTitle}>
                -
                {payMoney}
              </Text>
            </View>
            <Text style={styles.moneyTitleTips}>
              {i18n.t('CONSUME_SUCCESS')}
            </Text>
          </View>
          {
            detailList.map((item) => {
              const { title, dataIndex } = item;
              let content = consumeDetail[dataIndex];
              if (dataIndex === 'tradeType') {
                // 消费类型
                let payText = 'PHONE_CALL_2';
                if (content === 2) {
                  payText = 'MESSAGE_SEND';
                }
                content = `${i18n.t(payText)}${i18n.t('CONSUME')}`;
              }
              return content ? (
                <ListItem
                  style={styles.listItem}
                  extra={(
                    <Text style={styles.listContentTips}>
                      {content}
                    </Text>
                  )}
                >
                  <Text style={styles.listContent}>
                    {i18n.t(title)}
                  </Text>
                </ListItem>
              ) : null;
            })
          }
        </View>
        <ListItem
          style={{ ...styles.listItem, marginTop: 15, paddingLeft: 15 }}
          onPress={this.goFeedback}
        >
          <Text style={styles.listContent}>
            {i18n.t('HAVE_QUESTION_WITH_ORDER')}
          </Text>
        </ListItem>
      </PageContainer>
    );
  }
}
